<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="3">
        <el-form-item>
          <template slot="label">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                {{ getLabel(formKey)
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="item in commandOptions"
                  :key="item.value"
                  :command="item.value"
                  >{{ item.name }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <el-input
            v-model="form[formKey]"
            placeholder="多项输入，默认用逗号“，”分割"
          ></el-input>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="3">
        <el-form-item label="前端商品ID">
          <el-input
            v-model="form.name"
            placeholder="多项输入，默认用逗号“，”分割"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="供应商">
          <el-select v-model="form.ck" placeholder="请选择">
            <el-option label="测试" value="01"> </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="经营模式">
          <el-select v-model="form.ck" placeholder="请选择">
            <el-option label="测试" value="01"> </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="一级行业">
          <el-select v-model="form.ck" placeholder="请选择">
            <el-option label="测试" value="01"> </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="类目">
          <el-select v-model="form.ck" placeholder="请选择">
            <el-option label="测试" value="01"> </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="品牌">
          <el-select v-model="form.ck" placeholder="请选择">
            <el-option label="测试" value="01"> </el-option>
          </el-select>
        </el-form-item>
      </el-col> -->
      <el-col :span="3">
        <el-form-item label="发货单状态">
          <el-select v-model="form.deliveryStatus" placeholder="请选择">
            <el-option
              v-for="(item, index) in statusOptions"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="预约状态">
          <el-select v-model="form.appointmentStatus" placeholder="请选择">
            <el-option label="未预约" value="未预约"></el-option>
            <el-option label="已预约" value="已预约"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="来源类型">
          <el-select v-model="form.channelName" placeholder="请选择">
            <el-option label="测试" value="01"> </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="仓库">
          <el-select v-model="form.stockName" placeholder="请选择">
            <el-option label="测试" value="01"> </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="采购单创建人">
          <el-input v-model="form.createPerson" placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="创建时间">
          <DatePicker keys="createTime" @handleDateChange="handleDateChange"></DatePicker>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="到货时间">
          <DatePicker keys="expectArrivedTime" @handleDateChange="handleDateChange"></DatePicker>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="失效时间">
          <DatePicker keys="expirationDate" @handleDateChange="handleDateChange"></DatePicker>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="单据类型">
          <el-select v-model="form.orderType" placeholder="请选择">
            <el-option label="测试" value="01"> </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="标签">
          <el-select v-model="form.label" placeholder="请选择">
            <el-option label="测试" value="01"> </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="存储类型">
          <el-select v-model="form.storageType" placeholder="请选择">
            <el-option label="散装" value="散装"> </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="9">
        <div style="margin-top:31px;display:flex;justify-content:flex-start;">
          <el-button
            size="mini"
            type="success"
            icon="el-icon-search"
            @click="$emit('handleSearch', form)"
            >查询</el-button
          >
          <el-button size="mini" plain @click="reset">重置</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DatePicker from "./datePicker"
const form = () => {
  return {
    deliveryBatch:"",
    purchaseNo:"",
    appointmentNo:"",
    channelId:"",
    deliveryStatus:"",
    appointmentStatus:"",
    channelName:"",
    stockName:"",
    createPerson:"",
    createTimeStart:"",
    createTimeEnd:"",
    expectArrivedTimeStart:"",
    expectArrivedTimeEnd:"",
    expirationDateStart:"",
    expirationDateEnd:"",
    orderType:"",
    label:"",
    storageType:""
  };
};
export default {
  components:{
    DatePicker
  },
  data() {
    return {
      form: form(),
      statusOptions: [
        "已确认发货批次",
        "待收货",
        "部分收货",
        "收货完成",
        "取消",
        "已获取越库分拨结果",
        "上架完成"
      ],
      formKey: "deliveryBatch",
      commandOptions: [
        { name: "入库单编号", value: "deliveryBatch" },
        { name: "采购单编号", value: "purchaseNo" },
        { name: "预约单号", value: "appointmentNo" },
        { name: "来源单号", value: "channelId" }
      ]
    };
  },
  methods: {
    handleDateChange(ranges){
      this.form = Object.assign(this.form, {...ranges})
    },
    reset() {
      this.form = form();
    },
    handleCommand(command) {
      this.formKey = command;
    },
    getLabel(value) {
      const index = this.commandOptions.findIndex(item => item.value == value);
      if (index != -1) {
        return this.commandOptions[index].name;
      } else {
        return "";
      }
    }
  }
};
</script>

<style lang="scss" scoped></style>
